<template>
  <div>
    <div class="about-me" :style="{backgroundImage:'url(' + b1 + ')'}">
      <div class="about-me-title">ABOUT ME</div>
    </div>
    <div class="about-me-content safe-width">
      <el-row>
        <el-col :span="16" :xs="24" style="height: 440px; padding: 2%;overflow: hidden;">
          <card-text1></card-text1>
        </el-col>
        <el-col :span="8" :xs="24" style="height: 440px; padding: 2%;overflow: hidden;">
          <card-image></card-image>
        </el-col>
      </el-row>
    </div>
    <div class="welcome-to-me" :style="{backgroundImage:'url(' + b9 + ')'}">
      <div class="welcome-to-me-cover">
        <el-row>
          <el-col :span="24">
            <card-text1></card-text1>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="welcome-to-me-list safe-width">
      <el-row>
        <el-col :span="8" :xs="24">
          <card-image-text3></card-image-text3>
        </el-col>
        <el-col :span="8" :xs="24">
          <card-image-text3></card-image-text3>
        </el-col>
        <el-col :span="8" :xs="24">
          <card-image-text3></card-image-text3>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import cardText1 from '@/components/textcard/cardText1'
import cardImage from '@/components/textcard/cardImage'
import cardImageText3 from '@/components/textcard/cardImageText3'
export default {
  name: 'about-me',
  data () {
    return {
      b1: require('../../../static/bg-img/b1.jpg'),
      b9: require('../../../static/bg-img/b9.jpg')
    }
  },
  components: {
    cardText1, cardImage, cardImageText3
  }
}
</script>

<style scoped lang="less">
  .about-me {
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .about-me-title {
      width: 200px;
      padding: 20px 30px;
      letter-spacing: 3px;
      background: rgba(0, 0, 0, .4);
      color: #ffffff;
      text-align: center;
      font-size: 18px;
    }
  }

  .about-me-content {
    min-height: 500px;
    margin: 20px auto;
  }

  .welcome-to-me {
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*background-size: 100%;*/
    min-height: 600px;
    position: relative;
  }

  .welcome-to-me-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    padding: 3%;
    overflow: hidden;
  }
  .welcome-to-me-list{
    margin: 20px auto;
    .el-col{
      margin: 10px 0px;
    }
  }
</style>
